<template>
     <view class="box">
		<!-- 引入 nav-bar 组件，并传递页面标题 -->
		<nav-bar :navTitle="navTitle" />
        <view class="header">
            <view class="top">
                <view class="left">
                    <image :src="avatar" />
                </view>
                <view class="center">
                    <view class="title">{{ perInfo.nickName }}</view>
                    <view class="subtitle">海底捞陆家嘴商圈购物中心店</view>
                </view>
                <view class="right">
                    <image src="/static/images/kf.png" mode="" />
                </view>
            </view>

            <view class="bigicon">
                <view class="list">
                    <image src="/static/images/ewm.png" mode="" />
                    <view class="title">收 款 码</view>
                </view>
                <view class="list">
                    <image src="/static/images/lb.png" mode="" />
                    <view class="title">播报音箱</view>
                </view>
                <view class="list">
                    <image src="/static/images/dy.png" mode="" />
                    <view class="title">打印设置</view>
                </view>
                <view class="list">
                    <image src="/static/images/kfzx.png" mode="" />
                    <view class="title">客服中心</view>
                </view>
                <view class="list">
                    <image src="/static/images/kfzx.png" mode="" />
                    <view class="title">客服中心</view>
                </view>
                <view class="list">
                    <image src="/static/images/dzfp.png" mode="" />
                    <view class="title">电子发票</view>
                </view>
                <view class="list">
                    <image src="/static/images/csgl.png" mode="" />
                    <view class="title">财税管理</view>
                </view>
                <view class="list">
                    <image src="/static/images/tclc.png" mode="" />
                    <view class="title">退场流程</view>
                </view>
            </view>
        </view>

        <button @tap="exit">
            <image src="/static/images/tc.png" mode="" />
            退出帐号
        </button>
        <view class="slogen">
            <image src="/static/images/slogen.png" />
        </view>

        <navigation navId="5" />
    </view>
</template>

<script>
const app = getApp();
const $http = app.globalData.$http;
var config = require('../../utils/config.js');
export default {
    data() {
        return {
            picUrl: config.Config,
            avatar: '',

            perInfo: {
                nickName: ''
            },
			// 设置页面标题
			navTitle: '我的商户通',
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        exit() {
            uni.removeStorage({
                key: 'token',
                success(res) {
                    uni.reLaunch({
                        url: '/pages/index/index'
                    });
                }
            });
        }
    }
};
</script>
<style>
/**index.wxss**/
    /* 引入HarmonyOS Sans字体 */
    @font-face {
        font-family: 'HarmonyOS Sans';
        src: url('/static/fonts/HarmonyOS_Sans_Bold.ttf') format('truetype'); /* 请根据实际字体文件路径和格式修改 */
        font-weight: 500;
        font-style: normal;
    }

	.box {
		width: 700rpx;
		margin: 0 auto;
		padding-top: 200rpx; /* 进一步增大顶部内边距，给.top 留出更多空间 */
	}
.header {
    width: 100%;
}

.header .top {
    width: 96%;
    margin: 0 auto;
    height: 140rpx;
    background-color: #fff;
    border-radius: 30rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2rpx solid rgb(254, 114, 92);
}

.header .top .left {
    width: 100rpx;
    height: 100rpx;
}

.header .top .left image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}

.header .top .center {
    width: 560rpx;
    padding: 20rpx;
    box-sizing: border-box;
}

.header .top .center .title {
    color: rgb(0, 33, 80);
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
}

.header .top .center .subtitle {
    color: rgb(122, 134, 154);
    font-size: 24rpx;
    font-weight: 400;
    line-height: 34rpx;
    margin-top: 10rpx;
}

.header .top .right {
}

.header .top .right image {
    width: 64rpx;
    height: 64rpx;
}

.bigicon {
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding: 50rpx 0;
    flex-wrap: wrap;
}

.bigicon .list {
    width: 25%;
    margin-top: 40rpx;
}

.bigicon .list image {
    width: 70rpx;
    height: 70rpx;
    display: block;
    margin: 0 auto;
}

.bigicon .list .title {
    color: #444444;
    font-size: 28rpx;
    font-weight: 400;
    text-align: center;
    margin-top: 14rpx;
}

button {
    height: 80rpx;
    line-height: 80rpx;
    border: 1px solid rgb(254, 114, 92);
    color: rgb(72, 71, 71);
    font-size: 32rpx;
    background-color: #fff;
    width: 90%;
    margin: 40rpx auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

button image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
}

.slogen {
    width: 750rpx;
    height: 48rpx;
    position: fixed;
    bottom: 240rpx;
}
.slogen image {
    width: 548rpx;
    height: 48rpx;
    display: block;
    margin: 0 auto;
}
</style>
